<script setup>
import { ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router';
import { Document } from '@element-plus/icons-vue'
import {getDetailService,getDownLoadService} from '@/api/AnnouncementAll.js';
const route = useRoute();
// 获取路径参数 'id'
const id = ref(route.query.id);
console.log(id.value)
import {Check,Delete,Edit,Message,Search,Star} from '@element-plus/icons-vue'


// do not use same name with ref
const form = ref({
    name: '',
    category:'',
    brieflno:'',

})

//负责人和成员
  const members=ref([])
//老师
const teacher=ref(
    {   name:'',
        department: "",
        major: "",
        phone: "",
        userId: "",
        position:''
        
    }

)

//企业老师
const proEteacher=ref({
        name:'',
        department: "",
        major: "",
        phone: "",
        position: ""
})
//文件
const fileList = ref([])
import {getDetailData} from '@/api/Item.js'
//取消事件
const cancel=()=>{
  router.push('/project/establishment')
  ElMessage.warning("返回列表")
  
}
//获取数据
//获取路径id
const getData=async()=>{
      let result =await getDetailData(id.value)
      form.value.name=result.data.name
      form.value.category=result.data.category
      form.value.brieflno=result.data.brieflno
      teacher.value=result.data.teacherPlus
      result.data.memberWorks.forEach(member => {
          members.value.push(member);
      });
      console.log(members.value)
      proEteacher.value=result.data.proETeacherPlus
      console.log(proEteacher.value)
      fileList.value=result.data.annexPlus


}
getData();
const downloadFile= async(url)=>{
    try {
      let result = await getDownLoadService(url);
      // ... 处理 
      ElMessage.success("下载成功")
    } catch (error) {
      // ... 错误处理 ...
      ElMessage.error("下载失败")
    }
   
}
</script>
<template>
    <el-text class="mx-1 title-text" style="background-color: white;">
        华北电力大学大学生创新创业计划申请表
      </el-text>
      <el-form :model="form" label-width="120px" style="background-color: white;">
          <el-form-item label="项目名字" >
              <el-input v-model="form.name" disabled/>
          </el-form-item>
          <el-form-item label="项目类别">
              <el-radio-group v-model="form.category" disabled >
                <el-radio :label="0" size="large">创新训练项目</el-radio>
                <el-radio :label="1" size="large">创业训练项目</el-radio>
                <el-radio :label="2" size="large">创业实践项目</el-radio>
              </el-radio-group>
          </el-form-item>
          
                  <el-form-item label="负责人及成员">
                      <el-button type="primary" round @click="addMember()" disabled>添加成员</el-button>
                  </el-form-item>
                  <el-form-item label="负责人" class="indented-form-item" v-if="members.length>0">
                      <div class="input-row">
                      <el-input v-model="members[0].userId" placeholder="成员学号"  @blur="getStudent(members[0].userId)" disabled />
                      <el-input v-model="members[0].name" placeholder="姓名"  disabled />
                      </div>
                      <div class="input-row">
                      <el-input v-model="members[0].department" placeholder="院系" disabled />
                      <el-input v-model="members[0].major" placeholder="专业"  disabled/>
                      </div>
                      <div class="input-row">
                      <el-input v-model="members[0].phone" placeholder="电话"  disabled/>
                      <el-input v-model="members[0].work" placeholder="分工" disabled />
                      </div>
                  </el-form-item>
  
                  <el-form-item v-for="(member) in members.slice(1)" :key="member.id" label="成员" class="indented-form-item">
                      <div class="input-row">
                      <el-input v-model="member.userId" placeholder="成员学号"  @blur="getStudent(member.userId)" disabled />
                      <el-input v-model="member.name" placeholder="姓名"  disabled />
                      </div>
                      <div class="input-row">
                      <el-input v-model="member.department" placeholder="院系"  disabled />
                      <el-input v-model="member.major" placeholder="专业"  disabled />
                      </div>
                      <div class="input-row">
                      <el-input v-model="member.phone" placeholder="电话"  disabled />
                      <el-input v-model="member.work" placeholder="分工"   disabled/>
                      </div>
                     
                    </el-form-item>
  
                  
          
          <el-form-item label="指导老师"  v-model="teacher">
                      <div class="input-row">
                      <el-input v-model="teacher.userId" placeholder="成员学号"  @blur="getTeacher(teacher.userId)" disabled/>
                      <el-input v-model="teacher.name" placeholder="姓名"  disabled />
                      </div>
                      <div class="input-row">
                      <el-input v-model="teacher.department" placeholder="院系"  disabled />
                      <el-input v-model="teacher.major" placeholder="专业" disabled />
                      </div>
                      <div class="input-row">
                      <el-input v-model="teacher.phone" placeholder="电话"  disabled />
                      <el-input v-model="teacher.position" placeholder="职位"   disabled />
                      </div>
                  </el-form-item>
          <el-form-item label="企业老师" v-model="proEteacher">
                      <div class="input-row">
                      <el-input v-model="proEteacher.name" placeholder="姓名" disabled />
                      </div>
                      <div class="input-row">
                      <el-input v-model="proEteacher.department" placeholder="院系" disabled />
                      <el-input v-model="proEteacher.major" placeholder="专业" disabled/>
                      </div>
                      <div class="input-row">
                      <el-input v-model="proEteacher.phone" placeholder="电话" disabled />
                      <el-input v-model=" proEteacher.position" placeholder="职位" disabled />
                      </div>
           </el-form-item>
          <el-form-item label="项目简述">
              <el-input v-model="form.brieflno" type="textarea" placeholder="简述项目内容，控制在200字以内" disabled/>
          </el-form-item>
          <el-form-item>
          <div class="file-list">
            <div v-for="(file, index) in fileList" :key="index" class="file-item">
              <el-icon><document /></el-icon>
              
                <span class="highlighted-text" @click="downloadFile(file.url)">{{ file.name }}</span>
              
            </div>
          </div>
          </el-form-item>
          <el-form-item>
              <el-button @click="cancel">返回</el-button>
          </el-form-item>
      </el-form>
  </template>
    
 
  
  <style scoped>
  /* 缩进样式表中 */
  .indented-form-item {
      padding-left: 40px; /* 例如，增加左内边距 */
      /* 或者 */
      margin-left: 20px; /* 或者增加左外边距 */
  }
  /* 输入框 */
  .input-row {
    display: flex;
    grid-template-columns: repeat(2, 1fr); /* 创建两列 */
    margin-bottom: 10px; /* 调整这个值来改变上下间距 */
    
  }
  
  .input-row .el-input {
    flex: 1;
    margin: 0 5px;
  }

  

  /* 标题样式 */
  .title-text {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  /* 文件图标样式 */
.file-item el-icon {
  margin-right: 10px; /* 图标与文件名之间留出一定间距 */
}
.highlighted-text {
    color: #007bff; /* 蓝色 */
  text-decoration: underline; /* 下划线效果 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 18px; /* 字体大小设置为 18px */
  
}

.highlighted-text:hover {
    
  color: #7300e6; /* 鼠标悬停时的颜色（紫色） */
}
  
  </style>
    